<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<div id="app">
    <button @click="goUser">访问/user/test资源</button>
    <button @click="goPerson">访问/person/test资源</button>
</div>

</body>

<script>
    new Vue({
        el:"#app",
        methods:{
            goUser(){
                this.go("http://localhost:81/user/test")
            },
            goPerson(){
                this.go("http://localhost:81/person/test");
            },
            go(url){
                //发起异步请求
                let token = localStorage.getItem("security_token");
                if (!token){  //js内部有隐式转换，string如果不为null或者不为""，转为true
                    token = ""
                }

                axios({
                    url:url,
                    //发送请求，携带登录后的token信息
                    headers:{
                        token:token
                    }
                }).then(resp=>{
                        let r = resp.data;
                        let code = r.code;
                        if (code == 200){
                            //成功访问
                            alert(r.data)
                        }else if (code == 500){
                            //访问出错
                            alert(r.msg)
                        }else if (code == 1005){
                            //未登录 -- 跳转到登录页面
                            location.href = "login.html"
                        }else if (code == 2005){
                            //没有权限 -- 跳转到没有权限页面
                            location.href="auth.html"
                        }
                    });
            }
        }
    });
</script>

</html>